import {messages} from "share/common";
import React, { Component } from 'react';
import { Progress } from 'antd';
import ocrImg from 'images/expense-report/ocr.png';
import 'styles/my-account/components/ocr-loading.scss';
import Condition from 'components/condition';

// const { If } = Condition

class OcrLoading extends Component {

  constructor(props) {
    super(props);
    this.state = {
      percent: 1,
      status: 'loading'
    };
  }

  interval = null;

  componentDidMount() {
    this.init();
  }

  componentWillUnmount() {
    clearInterval(this.interval);
    this.interval = null;
  }

  init = () => {
    this.interval = setInterval(() => {
      let { status, percent } = this.state;
      percent < 90 && this.setState({ percent: percent + Math.random() * 10 | 0 });
      (status === 'error' || status === 'success' || !status) && clearInterval(this.interval);
    }, 50 + Math.random() * 100);
  };

  componentWillReceiveProps(nextProps, nextContext) {
    const { status } = nextProps;
    (status === 'success' || status === 'error') && this.setState({ percent: 100 });
  }

  static wordsTitle = {
    'success': messages('expense-1.key742')/*批量识别成功*/,
    'loading': messages('expense-1.key771')/*正在识别文件，请等待*/,
    'error': messages('expense-1.key744')/*批量识别失败*/
  };

  static statusMap = {
    'success': 'success',
    'loading': 'active',
    'error': 'exception'
  };


  render() {
    const { percent } = this.state;
    const { status } = this.props;
    return (
      <section className='ocr-loading'>
        <div className="ocr-loading-progress">
          <Progress
            type="circle"
            percent={percent}
            width={80}
            status={OcrLoading.statusMap[status] || null}
            format={() => <img className="ocr-loading__img" src={ocrImg} alt={'ocr'}
            />}/>
          {percent}%
        </div>
        <div className="ocr-loading-words">
          <h3>
            <span className={status}>{OcrLoading.wordsTitle[status]} <Condition.If value={status === 'loading'}><div className='ocr-loading-animate'/></Condition.If></span>
          </h3>
          <div>{messages('expense-1.key745')/*注：识别过程中请勿进⾏其他操作，切换菜单、关闭或刷新浏览器均会中断识别进程*/}</div>
        </div>
      </section>
    );
  }
}

OcrLoading.propTypes = {};

export default OcrLoading;
